<template>
<div>
  <div>
    <Row>
      <Col span="6" style="padding-left: 30px;">
      <div class="channelName">渠道名称：{{this.channelName}}</div>
      <Select v-model="productType" style="width:200px" placeholder="请选择产品类型" @on-change="typeChange">
        <Option v-for="item in productTypeList" :value="item.typeCode" :key="item.typeCode">{{ item.typeName }}</Option>
      </Select>
      </Col>
      <Col span="18">
          <Card style="width:600px;margin-bottom: 20px;">
            <p slot="title">
              <Icon type="ios-person-outline" style="font-size: 20px;vertical-align: middle;"></Icon>
              白名单
            </p>
            <a type="text" slot="extra" @click.prevent="changeList(1)" class="changeBtn">
              <Icon type="edit"></Icon>
              修改
            </a>
            <div style="word-break:break-all;">
              {{whiteList}}
            </div>
          </Card>

          <Card style="width:600px">
        <p slot="title">
          <Icon type="ios-person"  style="font-size: 20px;vertical-align: middle;"></Icon>
          黑名单
        </p>
            <a type="text" slot="extra" @click.prevent="changeList(2)" class="changeBtn">
              <Icon type="edit"></Icon>
              修改
            </a>
        <div  style="word-break:break-all;">{{blackList}}</div>
      </Card>

          <Modal
            v-model="modal"
            :title="modalTitle">

            <div style="line-height: 30px;color: red">
              * 请以英文分号;作为产品ID分隔符
            </div>

            <div style="line-height: 30px;color: red" v-show="type == 1">
              * 白名单以产品ID顺序优先推荐
            </div>

            <div style="line-height: 30px;color: red">
              * 保存单个英文分号;视为清空产品列表的操作
            </div>

            <Input v-model="modifyList" type="textarea"
                   :autosize="{minRows: 2,maxRows: 12}" autofocus="autofocus"
                   placeholder="待修改名单列表"></Input>

           <div style="text-align: center;margin-top: 20px;">
             <Button type="primary" @click="handleSubmit" style="margin-right: 40px;">保存</Button>
             <Button type="ghost" @click="handleReset" style="margin-left: 8px">重置</Button>
           </div>
            <div slot="footer"></div>
          </Modal>
      </Col>
    </Row>
  </div>
</div>
</template>

<script>

  export default{
    data: function () {
      return {
        type:1,
        channelId:'',
        channelName:'',
        productType:'',
        productTypeName:'',
        productTypeList: [],
        modal:false,
        modalTitle:'白名单修改',
        whiteList: '',
        blackList:'',
        initWhiteList:'',
        initBlackList:'',
        modifyList:''
      }
    },
    components: {},
    methods: {
      getTypeList(){
        this.api({
          url: "/product/type/list",
          method: "post",
          params:{
            channelId:this.channelId
          }
        }).then(data => {
          if(data&&data.length){
            this.productTypeList = data
            this.productType = data[0].typeCode
            this.productTypeName = data[0].typeName

            this.initProList()
          }

        })
      },
      initProList(){
        this.api({
          url: "/product/list/list",
          method: "post",
          params:{
            channelId:this.channelId,
            listType:this.productType,
            listStatus:1 //白名单
          }
        }).then(data=>{
          if(data&&data.length&&data[0].proList){
            this.whiteList = data[0].proList
            this.initWhiteList = data[0].proList
            this.initWhiteListId = data[0].listId
          }else {
            this.whiteList = ''
            this.initWhiteList = ''
          }

        })

        this.api({
          url: "/product/list/list",
          method: "post",
          params:{
            channelId:this.channelId,
            listType:this.productType,
            listStatus:0 //黑名单
          }
        }).then(data=>{
          if(data&&data.length&&data[0].proList){
            this.blackList = data[0].proList
            this.initBlackList = data[0].proList
            this.initBlackListId = data[0].listId
          }else {
            this.blackList = ''
            this.initBlackList = ''
          }

        })
      },

      changeList(type){
        this.modal = true
        this.type= type
        if(type == 1){
          this.modalTitle = this.channelName+'-'+this.productTypeName+'-'+ '白名单修改'
          this.modifyList = this.whiteList
        }else if(type == 2){
          this.modalTitle = this.channelName+'-'+this.productTypeName+'-'+ '黑名单修改'
          this.modifyList = this.blackList
        }
      },
      typeChange(type){
        this.productType = type
        this.initWhiteListId = ''
        this.initBlackListId = ''

        this.initProList()
      },
      handleSubmit(){
        let submitList = this.modifyList.replace(/ /g,'')
        let listId,listStatus
        if(this.type == 1){
          listStatus = 1
        }else if(this.type == 2){
          listStatus = 0
        }

        if(this.type == 2){
          listId = this.initBlackListId || ''
        }else if(this.type == 1){
          listId = this.initWhiteListId || ''
        }

        if(submitList==''){
          return;
        }else {
          if(submitList==';'){
            submitList = ''
          }

          if(submitList.match(/[^a-zA-z0-9-_;]/gi)){
            this.$Message.error('产品ID不能包含非法字符!');
          }else {
            this.api({
              url: "/product/list/update",
              method: "post",
              params:{
                channelId:this.channelId,
                listType:this.productType,
                listStatus:listStatus, //黑白名单
                listId:listId,
                proList:submitList
              }
            }).then(data=>{
              this.$Message.success('修改成功!');
              this.modal = false

              this.api({
                url: "/product/list/list",
                method: "post",
                params:{
                  channelId:this.channelId,
                  listType:this.productType,
                  listStatus:listStatus
                }
              }).then(data=>{
                if(data&&data.length&&data[0].proList){
                  if(listStatus == 0){
                    this.blackList = data[0].proList
                    this.initBlackList = data[0].proList
                    this.initBlackListId = data[0].listId
                  }else if(listStatus == 1){
                    this.whiteList = data[0].proList
                    this.initWhiteList = data[0].proList
                    this.initWhiteListId = data[0].listId
                  }
                }else{
                  if(listStatus == 0){
                    this.blackList = ''
                    this.initBlackList = ''
                  }else if(listStatus == 1){
                    this.whiteList = ''
                    this.initWhiteList = ''
                  }
                }

              })

            })
          }

        }


      },
      handleReset(){
        if(this.type == 1){
          this.modifyList = this.initWhiteList
        }else if(this.type == 2){
          this.modifyList = this.initBlackList
        }
      }
    },
    created(){
      this.channelId = this.$route.query.channelId
      this.channelName = this.$route.query.channelName

      this.getTypeList()
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
   @import "../../base";
  .channelName {
    margin: 10px 0;
    font-size: 14px;
    line-height: 36px;
  }
  .changeBtn{
    color: $theme-color;
  }
</style>
